<!--
 * @Author: wangjianwhy wangjianwhy@sina.com
 * @Date: 2024-09-24 15:06:23
 * @LastEditors: wangjianwhy wangjianwhy@sina.com
 * @LastEditTime: 2024-09-27 18:09:59
 * @FilePath: \my-vue3-appg:\vscode-work\tlo-shopping\src\components\FooterNav.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="footer-nav">
      <router-link to="/home" class="nav-item">智家</router-link>
      <router-link to="/scene" class="nav-item">场景</router-link>
      <router-link to="/mall" class="nav-item">商城</router-link>
      <router-link to="/project" class="nav-item">工程</router-link>
      <router-link to="/myCenter" class="nav-item">我的</router-link>
    </div>

  </template>
  
  <style scoped>
    .footer-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      display: flex;
      justify-content: space-around;
      background-color: #fff;
      margin: auto;
    }
    .nav-item {
      flex: 1;
      text-align: center;
      padding: 10px;
      text-decoration: none;
      color: #333;
      /*border: 1px solid rgb(132, 0, 255);*/
      width: 100%;
      margin: auto;
      overflow: auto;
      position: relative;
    }
    .router-link-active {
      color: #42b983;
      width: 100%;
      height: 100%;
    }
    .zj-tb {
      width: 100%; /* 宽度 */
      height: 100%; /* 高度 */
      background-image: url('/images/tb.jpg');
      background-position: -10px -10px; /* X轴和Y轴的偏移量 */
      background-size: 320% 320%; /* 背景图片的大小 */
      background-repeat: no-repeat; /* 防止背景图片重复 */
    }
    </style>